<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useAddorUpdateGroup, useGetPageGroups } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './add-or-edit.vue'
import AssociatedEnterprises from './associated-enterprises.vue'

const addOrEditVisible = ref<boolean>(false)
const associatedEnterprisesVisible = ref<boolean>(false)

const id = ref<any>('')

const editparams = ref<any>(null)

const initialState = {
    groupName: '',
}

const state = ref(cloneDeep(initialState))

const columns = [
    {
        label: '集团名称',
        prop: 'groupName',

    },
]

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const tablePage = ref(cloneDeep(initialPage))

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { fixed: 'left', title: '序号', type: 'seq', width: 50 },
        { field: 'groupName', title: '集团名称' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    maxHeight: 600,
    rowConfig: {
        keyField: 'id',
    },
})

const params = computed(() => {
    return {
        groupName: state.value.groupName,
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
    }
})

const tableData = ref<any[]>([])

const { data, isLoading } = useGetPageGroups(params)

const { isPending, mutate } = useAddorUpdateGroup()

const loading = computed(() => isLoading.value || isPending.value)
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function search(val: any) {
    state.value = cloneDeep(val)
    tablePage.value.currentPage = 1
}

function reset() {
    state.value = cloneDeep(initialState)
    tablePage.value.currentPage = 1
}

function changeStatus(row: any) {
    const params = {
        groupName: row.groupName,
        id: row.id,
        status: row.status === 0 ? 1 : 0,
    }
    mutate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

function addGroup() {
    addOrEditVisible.value = true
}

function editGroup(row: any) {
    id.value = row.id
    editparams.value = cloneDeep(row)
    addOrEditVisible.value = true
}

const groupName = ref('')
function associatedEnterprises(row: any) {
    id.value = row.id
    groupName.value = row.groupName
    associatedEnterprisesVisible.value = true
}

watchEffect(() => {
    if (data.value) {
        tableData.value = cloneDeep(data.value?.records) || []
        tablePage.value.total = data.value.total ?? 0
    }
})
</script>

<template>
    <ElCard shadow="never">
        <template #header>
            <div class="text-16 font-700">
                集团管理
            </div>
        </template>

        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="reset"
        />

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                     :loading="loading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-button type="primary"
                           @click="addGroup"
                >
                    新建
                </el-button>
            </template>

            <template #status="{ row }">
                <vxe-switch :model-value="row.status === 1"
                            @change="changeStatus(row)"
                />
            </template>

            <template #operate="{ row }">
                <div class="text-#dA0004 flex gap-15 justify-center">
                    <el-button text
                               type="primary"
                               @click="editGroup(row)"
                    >
                        编辑
                    </el-button>

                    <el-button text
                               type="primary"
                               @click="associatedEnterprises(row)"
                    >
                        关联企业
                    </el-button>
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEdit :key="id"
               v-model:id="id"
               v-model:editparams="editparams"
               v-model:visible="addOrEditVisible"
    />

    <AssociatedEnterprises :key="id"
                           v-model:id="id"
                           v-model:visible="associatedEnterprisesVisible"
                           v-model:groupName='groupName'
    />
</template>
